<template>
	<view class="scanCode_box">
		<camera class='camera' mode="scanCode" @error="cameraError" @scancode='scancode' frame-size='large'>
			<cover-view class='animation' :animation="animation"></cover-view>
		</camera>
	</view>
</template>

<script>
	let animation = uni.createAnimation({});
	export default {
		data() {
			return {
				animation: null
			}
		},
		onShow() {
			this.donghua()
		},
		methods: {
			scancode(e) {

			},
			cameraError(e) {

			},
			donghua() {
				let that = this;
				let scode = true
				setInterval(function() {
					if (scode) {
						animation.translateY(200).step({
							duration: 3000
						})
						scode = !scode;
					} else {
						animation.translateY(-10).step({
							duration: 3000
						})
						scode = !scode;
					}
					that.animation = animation.export()

				}.bind(this), 3000)
			},
			scancode(e) {
				// 扫描结果
				let res = e.detail.result
				console.log(res);
			},

		}
	}
</script>

<style>
	.scanCode_box {
		width: 100%;
		display: flex;
		flex-direction: column;
		background-color: #f8f8f9;
		position: fixed;
		align-items: center;
		justify-content: space-around;
	}

	.camera {
		width: 480rpx;
		height: 450rpx;
		border-radius: 6rpx;
		margin: 30rpx;
	}

	.animation {
		position: absolute;
		left: 4rpx;
		width: 480rpx;
		height: 2rpx;
		background-color: #4CD964;
		border-radius: 50%;
	}
</style>